<template>
  <div :class="['container', 'animated', move]">
    <div class="container--item__header">
      <span class="container--header__useImg"></span>
      <span class="container--header__btn" @click="login"
            v-if="useTellDataBoole" ref="con">{{useTellData}}</span>
      <span class="container--header__useTellData" v-if="!useTellDataBoole">{{useTellData}}</span>
    </div>
    <ul class="container--item__box">
      <li class="container--item__list">
        <img src="../assets/PersonalEnter/Pending-payment.png"
             class="container--img__payment" alt="#">
        <span class="container--list__text">待付款</span>
      </li>
      <li class="container--item__list">
        <img src="../assets/PersonalEnter/Goods-to-be-received.png"
             class="container--img__payment" alt="#">
        <span class="container--list__text">待收货</span>
      </li>
      <li class="container--item__list">
        <img src="../assets/PersonalEnter/after-sale.png"
             class="container--img__payment" alt="#">
        <span class="container--list__text">售后/退换货</span>
      </li>
      <li class="container--item__list" @click="payment">
        <img src="../assets/PersonalEnter/order.png"
             class="container--img__payment" alt="#">
        <span class="container--list__text">所有订单</span>
      </li>
    </ul>
    <ul class="container--body__list">
      <li class="container--body__optionList">
        <img src="../assets/PersonalEnter/mall.png"
             class="container--img__mall"
             alt="#">
        <span class="container--body__text">商城分期订单</span>
        <span class="container--body__right">
        待还0.0元
        <img src="../assets/PersonalEnter/right.png"
             class="container--img__right"
             alt="#">
      </span>
      </li>
      <li class="container--body__optionList">
        <img src="../assets/PersonalEnter/bank.png"
             class="container--img__mall"
             alt="#">
        <span class="container--body__text">我的银行卡</span>
        <span class="container--body__right">
        <img src="../assets/PersonalEnter/right.png"
             class="container--img__right"
             alt="#">
      </span>
      </li>
      <li class="container--body__optionList" @click="toReceivingAddress">
        <img src="../assets/PersonalEnter/address.png"
             class="container--img__mall"
             alt="#">
        <span class="container--body__text">收货地址</span>
        <span class="container--body__right">
        <img src="../assets/PersonalEnter/right.png"
             class="container--img__right"
             alt="#">
      </span>
      </li>
      <li class="container--body__optionList">
        <img src="../assets/PersonalEnter/coupon.png"
             class="container--img__mall"
             alt="#">
        <span class="container--body__text">优惠券</span>
        <span class="container--body__right">
        <img src="../assets/PersonalEnter/right.png"
             class="container--img__right"
             alt="#">
      </span>
      </li>
    </ul>
    <ul class="container--body__list">
      <li class="container--body__optionList">
        <img src="../assets/PersonalEnter/feedback.png"
             class="container--img__mall"
             alt="#">
        <span class="container--body__text">我要反馈</span>
        <span class="container--body__right">
        <img src="../assets/PersonalEnter/right.png"
             class="container--img__right"
             alt="#">
      </span>
      </li>
      <li class="container--body__optionList">
        <img src="../assets/PersonalEnter/set.png"
             class="container--img__mall"
             alt="#">
        <span class="container--body__text">设置</span>
        <span class="container--body__right">
        <img src="../assets/PersonalEnter/right.png"
             class="container--img__right"
             alt="#">
      </span>
      </li>
      <li class="container--body__optionList">
        <img src="../assets/PersonalEnter/help.png"
             class="container--img__mall"
             alt="#">
        <span class="container--body__text">帮助中心</span>
        <span class="container--body__right">
        <img src="../assets/PersonalEnter/right.png"
             class="container--img__right"
             alt="#">
      </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'personal',
  data() {
    return {
      loginBtn: true,
      useTellData: '立即登录',
      useTellDataBoole: true,
      useLocalStorageData: '',
      move: 'fadeInLeftBig',
      animate: true,
    };
  },
  methods: {
    login() {
      setTimeout(() => {
        this.$router.push({ name: 'auth' });
      }, 100);
      this.move = 'bounceOutLeft';
    },
    toReceivingAddress() {
      setTimeout(() => {
        this.$router.push({ name: 'addressWarehouse', params: { data: this.useTellDataBoole } });
      }, 100);
      this.move = 'bounceOut';
    },
    payment() {
      this.$router.push({ name: 'myOrder' });
    },
  },
  mounted() {
    if (this.$route.params.data) {
      window.localStorage.setItem('userTell', this.$route.params.data);
    } else {
      this.useTellData = '立即登录';
    }
    if (window.localStorage.getItem('userTell')) {
      /* eslint-disable*/
      this.useLocalStorageData = window.localStorage.getItem('userTell');
      this.useTellData = this.useLocalStorageData.slice(0, 3) + '****' + this.useLocalStorageData.slice(7);
      this.useTellDataBoole = false;
    }
    // window.localStorage.removeItem("userTell")
  },
  created() {
    this.$bus.$on('personalMove', () => {
      this.move = 'bounceOutRight'
    });
  },
};
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  %bottom{
    margin-bottom: .26666666667rem;
  }
  .animated{
    animation-duration: .3s;
  }
  .container{
    width: 100vw;
    height: 100vh;
    background-color: #f6f6f6;
    .container--item__header{
      background-image: url("../assets/PersonalEnter/shopping_mall_banner.png");
      background-size: 100%;
      position: relative;
      width: 100vw;
      @extend %bottom;
      height: 4.5866666667rem;
      background-color: #fff;
      .container--header__useImg{
        position: relative;
        left: -3.2rem;
        top: 28%;
        bottom: 0;
        right: 0;
        margin: auto;
        display: block;
        border: 1px solid #ccc;
        background-image: url("../assets/PersonalEnter/use.jpg");
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        width: 1.61333333rem;
        height: 1.61333333rem;
      }
      .container--header__useTellData{
        position: relative;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: block;
        font-size: .4rem;
        line-height: .9866666667rem;
        text-align: center;
      }
      .container--header__btn{
        position: relative;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: block;
        width: 3.76rem;
        line-height: .9866666667rem;
        text-align: center;
        border-radius: .5rem;
        background-color: #196fe3;
        font-size: .4rem;
        color: #fff;
      }
      .container--header__btn:active{
        background-color: #338fe3;
      }
    }
  }
  .container--item__box{
    width: 100vw;
    height: 2rem;
    list-style: none;
    @extend %bottom;
    background: #fff;
    .container--item__list{
      display: inline-block;
      text-align: center;
      height: 100%;
      width: 25%;
      .container--img__payment{
        display: block;
        margin: auto;
        width: .66666667rem;
        line-height: .66666667rem;
        padding-top: .3rem;
      }
      .container--list__text{
        display: block;
        font-size: .4rem;
        margin-top: .3rem;
      }
    }
  }
  .container--body__list{
    width: 100vw;
    background: #fff;
    @extend %bottom;
    .container--body__optionList{
      position: relative;
      width: 100vw;
      height: 1.184rem;
      .container--img__mall{
        width: .45rem;
        height: .45rem;
        vertical-align: middle;
        padding: .367rem;
      }
      .container--body__text{
        font-size: .4rem;
        vertical-align: middle;
        margin-left: .273rem;
      }
      .container--body__right{
        position: absolute;
        right: .4rem;
        top: .367rem;
        font-size: .4rem;
        vertical-align: middle;
        .container--img__right{
          width: .4133333rem;
          height: .4133333rem;
          vertical-align: middle;
        }
      }
    }
  }
</style>
